<template>
  <div>
    <h2>Home计数：{{ counter }}</h2>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
    <button @click="popylarClick">首页-流行</button>
    <button @click="hotClick">首页-热门</button>
    <button @click="songClick">首页-歌单</button>
    <div>
      x: {{ scrollX }}
      <br>
      y: {{ scrollY }}
    </div>

  </div>
</template>
<script>
import { onMounted, reactive, ref } from "vue";
import useCounter from "../hooks/useCounter";
import useTitle from "../hooks/useTitle";
import useScrollPosition from "../hooks/useScrollPosition"

export default {
  setup() {
    const { counter, increment, decrement } = useCounter();
    // 2.修改标题
   const title = useTitle('首页');
    // 3.监听按钮点击
    function popylarClick(){
        title.value = '首页-流行';
    }
    function hotClick(){
        title.value = '首页-热门';

    }
    function songClick(){
        title.value = '首页-歌单';

    }
    // console.log(useScrollPosition());
      const { scrollX,scrollY } = useScrollPosition()
    console.log(scrollX,scrollY);
 
    return {
      counter,
      increment,
      decrement,
      popylarClick,
      hotClick,
      songClick,
      scrollX,
      scrollY
    };
  },
};
</script>
<style scoped>
/*局部css 支持css3 可以改变elementUI组件的样式 且组件样式调整只在本页面生效**/
/*主样式*/
</style>
